<template>
  <div>
    <ul>
      <li v-for="(item,index) in arr" :key="index">{{item}}</li>
    </ul>
     <!-- 
      总结
      数组方法会改变原始数组，那么就会触发v-for更新，视图也就会自动更新
      -->

      <!-- 
        情况三：通过数组的下标值来修改数组元素的值
        修改后观察，v-for会不会更新-视图会不会更新

        总结：数组变化了，但不会触发v-for更新
        因为：这个和vue实现原理相关，因为vue监听不到通过下标值来修改数组元素的，因此就不会触发v-for
        
        问题：有时候就是需要通过下标值来修改内容的，那如何解决这个问题呢 ？
        答：vue专门提供了一个方法来解决这个问题，这个方法就是this.$set()
        语法：this.$set(目标结构, 下标值/属性名, 新的值)
        目标结构：数组、对象
       -->
      <button @click="changeFn">修改下标值为1的元素内容</button>

      <p>姓名：{{ obj.name }}</p>
      <button @click="addName">添加姓名</button>
      <!-- 

        总结：vue监听不到后期添加属性的变化的，因此vue专门提供了一个方法解决这个问题
        方法：this.$set
       -->
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr: ["小明","小芳","小红"],
      obj: {}
    }
  },
  methods: {
    changeFn(){
      // this.arr[1] = "芳芳";
      // console.log(this.arr);
      this.$set(this.arr, 1, "芳芳")
    },
    addName(){
      // this.obj.name = "小小"
      this.$set(this.obj, "name",  "小小")
    }
  }
}
</script>

<style>

</style>